<template>
	<view>
		<cu-custom bgColor="bgmain" :isBack="true">
			<view slot="content">选择话题</view>
		</cu-custom>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="title" type="text" placeholder="搜索话题" confirm-type="search"></input>
				<button class="cu-btn bg-green shadow-blur round"
					style="height: 55rpx;margin-right: 9rpx;background-color: #FF4C4D;font-size: 28rpx;"
					@click="getsou">搜索</button>
			</view>
		</view>
		<view class="heat">
			<view class="heat-text flex">
				已选择话题<view class="heat-empty" @click="getempty()">
					<image src="../../../static/icon/fabu/shua.png" style="width: 25rpx;height: 25rpx;"></image>清空
				</view>
			</view>
		</view>
		<view class="cu-list menu lists">
			<view class="list-tab flex" v-for="(items,indexs) in lists " :key="indexs">
				<view class="list-text">
					#{{items.title}}
				</view>
				<view class="fork" @click="getfork(indexs)">
					<image src="../../../static/icon/fabu/cha.png" style="width: 16rpx;height: 16rpx;"></image>
				</view>
			</view>


		</view>
		<view class="heat">
			<view class="heat-text flex">
				热门话题<view class="heat-tips">(最多选择3个)</view>
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item" :class="menuArrow?'arrow':''" style="margin-top: -95rpx;">
			</view>
			<view class="cu-item" v-for="(item,index) in list " :key="index" @click="getchoice(index)">
				<view class="content flex xuan">
					<checkbox class='round checked chad' :checked="item.chad"></checkbox>
					<view style="margin-left: 30rpx;">
						<view class="con-title">
							<!-- <checkbox class='round' :class="checkbox[1].checked?'checked':''" :checked="checkbox[1].checked?true:false" value="B"></checkbox> <custom-tab-bar direction="" :show-icon="" :selected="" @onTabItemTap="" /> -->
							#{{item.title}}
						</view>
						<view class="con-details">
							{{item.con}}人参与
						</view>
					</view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="bottoms">
				<view class="btn" @click="getchoose()">选好了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import siteInfo from '@/siteinfo.js';
	var app = getApp();
	export default {
		data() {
			return {
				list: [],
				selectedlist: '',
				page: 1,
				lists: [],
				title: ''
			}
		},
		async onLoad(options) {
			// console.log('-----------------getlist',JSON.parse(options.getlist))
			this.getpost();
			// this.lists = JSON.parse(options.getlist)
			// this.getlistchad()
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {

		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		// onShareAppMessage: function () {
		// }
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getpost();
		},
		/**
		 * 用户点击右上角分享
		 */
		methods: {
			// getlistchad(){
			// 	for (var i = 0; i < this.list.length; i++) {
			// 		if (this.lists[i].id == this.list[i].id) {
			// 			this.list[i].chad = false; // 循环
			// 		}
			// 	}
			// },
			getpost() {
				const self = this;
				app.globalData.util.request({
					url: 'Dmhtopic/index',
					data: {
						page: self.page,
						title: self.title,
						s_id:uni.getStorageSync('schoolId')
					},
					success(res) {
						console.log(res.data.data.list, '----------')
						// self.list = res.data.data.list;
						// self.list.push(...res.data.data.list)
						self.list = [...self.list, ...res.data.data.list]
					}
				});
			},
			getsou() {
				const self = this;
				self.list = []
				self.page = 1
				app.globalData.util.request({
					url: 'Dmhtopic/index',
					data: {
						page: self.page,
						title: self.title,
						s_id:uni.getStorageSync('schoolId')
					},
					success(res) {
						console.log(res.data.data.list, '----------')
						// self.list = res.data.data.list;
						// self.list.push(...res.data.data.list)
						self.list = [...self.list, ...res.data.data.list]
					}
				});
			},
			/**
			 * @param {Object} e
			 * 我选好了按钮操作方法
			 */
			getchoose(e) {
				uni.$emit('getlist', this.lists)
				uni.navigateBack({
					delta: 1
				})
			},
			/**
			 * 选择当前话题（最多三个）
			 */
			getchoice(e) {
				console.log(e, '-----------')

				if (this.list[e].chad == true) {
					console.log('执行取消')
					this.list[e].chad = false
					var data = [];
					for (var i = 0; i < this.lists.length; i++) {

						if (this.lists[i].id != this.list[e].id) {
							data = [...data, this.lists[i]];
						}
					}
					this.lists = data;
				} else {
					if (this.lists.length >= 3) {
						uni.showToast({
							title: '最多只可选择3个话题',
							icon: 'none',
							duration: 3000
						})
						return false;
					}
					console.log('执行选中')
					this.list[e].chad = true
					this.lists = [...this.lists, this.list[e]];
				}


			},
			getfork(e) {
				console.log('执行取消', e)
				// this.list[e].chad = false

				var data = [];
				for (var i = 0; i < this.list.length; i++) {
					if (this.lists[e].id == this.list[i].id) {
						this.list[i].chad = false; // 循环
					}
				}
				this.lists.splice(e, 1); // 删除二维数组中的下标里面的数据
				// this.lists = data;
			},
			getempty() {
				this.lists = [];
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].chad = false;
				}
			}

		},
	};
</script>

<style>
	switch[checked] .wx-switch-input.wx-switch-input-checked,
	checkbox[checked] .wx-checkbox-input,
	radio[checked] .wx-radio-input,
	switch.checked .uni-switch-input.uni-switch-input-checked,
	checkbox.checked .uni-checkbox-input,
	radio.checked .uni-radio-input {
		background-color: #FF4C4D !important;
		border-color: #FF4C4D !important;
		color: #ffffff !important;
	}

	page {
		background-color: #FFF;
	}

	.heat {
		margin-top: 34rpx;
		/* height: 34rpx; */
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #141414;
		/* background-color: #141414; */
		padding: 0 30rpx;
	}

	.heat-text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #141414;
		align-items: center;
		/* justify-content: center; */
	}

	.heat-tips {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 70rpx;
	}

	.con-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #121212;
		line-height: 45rpx;
	}

	.con-details {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 45rpx;
	}

	.xuan {
		align-items: center;
	}

	.chad {
		/* 		width: 32rpx !important;
		height: 32rpx !important; */
		zoom: 70%;
		/* background-color: #FF4C4D !important; */
	}

	.bottoms {
		width: 100%;
		height: 168rpx;
		position: fixed;
		background-color: #FFFFFF;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx -13rpx 62rpx 0rpx #DCCDC5;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
	}

	.btn {
		width: 520rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #FF484A 0%, #FF716C 100%);
		box-shadow: 0rpx 6rpx 30rpx 0rpx #FF4B4C;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 48rpx;
	}

	.heat-empty {
		margin-left: auto;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.lists {
		padding: 0 30rpx;
		margin-top: 34rpx;
	}

	.list-tab {
		margin-top: 15rpx;
		padding: 20rpx 30rpx;
		background: #FFF9F7;
		border-radius: 32rpx;
	}

	.list-text {
		width: 90%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4C4D;
	}

	.fork {
		width: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
